<template>
  <MyHeader> </MyHeader>
  <el-row style="padding-top: 60px; padding-bottom: 20px">
    <el-col :span="14" >
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">home</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/TagImgs' }">tagImgs</el-breadcrumb-item>
            <el-breadcrumb-item>detail:{{ img_id }}</el-breadcrumb-item>
            <el-breadcrumb-item @click="goBack" style="color: deeppink">返回</el-breadcrumb-item>
        </el-breadcrumb>
<!--        <el-button @click="goBack"> 返回 </el-button>-->
    </el-col>
    <el-col :span="6">
        <el-input style="width: 120px" v-model="this.gotoId"></el-input> <el-button @click="gotoIdImgD">跳转</el-button>
    </el-col>
    <el-col :span="4">
<!--      <el-button @click="addTag"><span> 添加标签 </span></el-button>-->
      <el-button @click="copyFileUrl"><span> 复制path </span></el-button> &nbsp;&nbsp;
      <el-button @click="delImg"><span> 删除图片 </span></el-button>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="4">
      <el-row>
        <el-col :span="16">
          <el-input v-model="this.searchTag" placeholder="input tag" size="small" />
        </el-col>
        <el-col :span="8">
          <el-button :icon="Search" size="small" @click="searchTags()">Search</el-button>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="8">
          <el-button @click="showImgTags" size="small">该图片标签</el-button>
        </el-col>
        <el-col :span="8">
          <el-button @click="orderTags" size="small">其他标签</el-button>
        </el-col>
      </el-row>
      <el-row class="tags-menu">
        <div class="el-scrollbar sidebar menu-scr" >
          <el-scrollbar height="1000px">
            <el-menu
                :default-active="$route.path"
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo infinite-list"
                text-color="#fff"
                router>
              <!--@open="handleOpen"-->
              <!--@close="handleClose"-->
              <el-menu-item
                  index="#"
                  @click="clickTag([tag.name,tag.cnName,tag.id])"
                  v-for="tag in tags_show"
                  class="infinite-list-item"
                  style="height: 32px"
                  :key="tag.id">
                <span class="tag_name_txt">{{tag.name}}({{tag.cnName}})</span>
              </el-menu-item>

            </el-menu>
          </el-scrollbar>
        </div>
      </el-row>
    </el-col>
    <el-col :span="20" style="padding: 20px">

        <el-row style="width: 100%">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="clickTabs" @tab-change="changeTab" style="width: 100%">
                <el-tab-pane label="查看图片" name="checkimg">
                    <div id="img_div" v-if="!showAddTag" style="width: 90%; height: 90% ;margin: 0 auto; text-align: center ">
                        <el-image
                                :src=img_blob
                                :preview-src-list="[img_blob]"
                                alt="图片地址.png">
                        </el-image>

                    </div>
                </el-tab-pane>
                <el-tab-pane label="添加标签" name="addtag">
                    <el-row style="width: 100%; padding-top: 50px">
                        <el-col :span="4"></el-col>
                        <el-col :span="16" v-if="showAddTag">
                            <div id="add_tag_div" v-if="showAddTag">
                                <el-form style="width: 100%">
                                    <el-form-item label="添加的tag">
                                        <el-input v-model="add_tagName" :readonly="true"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button @click="onSubmitTT">立即提交</el-button>
                                        <el-button @click="onEX">返回</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                        <el-col :span="4"></el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-row>


<!--      <el-image-viewer-->
<!--          v-if="showViewer"-->
<!--          :on-close="closeViewer"-->
<!--          @click="closeViewer"-->
<!--          :url-list=[img_blob]>-->
<!--      </el-image-viewer>-->
    </el-col>
  </el-row>

</template>

<script>
import axios from 'axios'
import {inject} from "vue";
import {useRoute} from 'vue-router';
import MyHeader from "@/components/MyHeader"
import $cookies from "vue-cookie";

export default {
  name: "MyImgDetail",
  data(){
    return{
      activeName:"checkimg",
      isLogin: false,
      add_tagId: "",
      add_tagName: "",
      fileUrl: "文件Url",
      showViewer: false,
      showAddTag: false,
      myBaseURL: inject('$baseURL'),
      img_id: this.$route.params.id,
      img_blob: "",
      searchTag: "",
        gotoId: "",
      tags_data: [],
      tags_show: [],
      tags_selectDate: [],
      tagPage: 1,
      tagSept: 100
    }
  },
  methods:{
    clickTabs:function () {
        console.log(this.activeName)
    },
    changeTab:function (tabname) {
      if(tabname === "checkimg")
      {
          this.showAddTag = false
      }else if(tabname === "addtag")
      {
          this.addTag()
      }
    },
    showImgTags:function (){
      this.tags_show = this.tags_data;
    },
    loadTags: function () {
      let re_data;
      axios({
        method: 'get',
        url: '/source/getTagList',
        baseURL: this.myBaseURL,
        params: {
          page: this.tagPage,
          step: this.tagSept,
        }
      }).then(res=>{
        this.tagPage = this.tagPage+1
        re_data = res.data
        this.tags_selectDate.push(...re_data)
      })
    },
    orderTags: function (){
      this.tags_show = this.tags_selectDate
    },
    goBack: function (){
        this.$router.back()  // go(-1)
    },
    onSubmitTT: function (){
      if(this.isLogin !== "true")
          this.$message.error('请先登录！');//alert("请先登录！")

      if(this.add_tagId === ""){
          this.$message.error('数据不全！');//alert("数据不全！")
        return
      }
      const token = $cookies.get("token")
      axios({
        method:'post',
        url:'img/addTag',
        baseURL:this.myBaseURL,
        params:{
          imgId: this.img_id,
          tagId: this.add_tagId
        },
        headers: {
          "Content-Type": "multipart/form-data",
          "User-Token": token,
        }
      }).then(response => {
        //print(response.data)
        if(response.data === 1)
            this.$message.success('提交成功！');//alert("提交成功！")
        else
            this.$message.error('提交失败！');//alert("提交失败！")
      })

      console.log('submit!');
      // 刷新
      this.add_tagId = "";
      this.add_tagName = "";
    },
    onEX:function(){
      this.showAddTag = false
    },
    addTag(){
      this.loadTags();
      this.loadTags();
      this.tags_show = this.tags_selectDate;
      this.showAddTag = true;
    },
    delImg(){
      //http://localhost:8090/img/delImgInfo?id=305
      if(this.isLogin !== "true")
      {
          this.$message.error('请先登录！');//alert("请先登录！")
        return;
      }
      const token = $cookies.get("token")
      axios({
        method:'get',
        url:'/img/delImgInfo',
        baseURL:this.myBaseURL,
        responseType: 'text',
        params:{
          id: this.$route.params.id,
        },
        headers:{
          "User-Token" : token,
        }
      }).then(function(response) {
        // blob方法需要先将 图片字符串转换成 blob（数组） 比较麻烦
        console.log(response.data)
        if(response.data === "1")
            this.$message.success('提交成功！');//alert("提交成功！")
        else
            this.$message.error('提交失败！');//alert("提交失败！")
      });
    },
    onPreview() {
      this.showViewer = true
    },
    // 关闭查看器
    closeViewer() {
      console.log("wocaol")
      this.showViewer = false
    },
    // 复制文件资源管理器url
    copyFileUrl () {
        //navigator.clipboard.writeText(this.fileUrl).then(() => {
        //    this.$message.success('复制成功');
        //});
        //创建input标签
        var input = document.createElement('input')
        //将input的值设置为需要复制的内容
        input.value = this.fileUrl;
        //添加input标签
        document.body.appendChild(input)
        //选中input标签
        input.select()
        //执行复制
        document.execCommand('copy')
        //成功提示信息
        this.$message.success('success!')
        //移除input标签
        document.body.removeChild(input)
    },
    getBlobFromId: async function (img_id){
      let blob_url;
      // await 声明等待异步操作执行完毕
      await axios({
        method:'get',
        url:'/source/getBlobFromId',
        baseURL:this.myBaseURL,
        responseType: 'blob',
        params:{
          id: img_id,
        }
      }).then(function(response) {
        // blob方法需要先将 图片字符串转换成 blob（数组） 比较麻烦
          const blob = new Blob([response.data], { type: 'img/jpg' })
          const url = window.URL.createObjectURL(blob)
          blob_url = url
      });
      return blob_url
    },
    searchTags: async function () {
      await axios({
        method: 'get',
        url: '/search/tag',
        baseURL: this.myBaseURL,
        params: {
          tagName: this.searchTag,
        }
      }).then(response => {
        let res = response.data
        this.tags_show = res
      })
    },
    clickTag: function (tag_info){
      if(this.showAddTag === true){
        this.selectTag(tag_info);
      }else {
        this.toThisTagPage(tag_info[0])
      }
    },
    toThisTagPage: function (name){
      console.log(name)
      this.$router.push({path: '/TagImgs',query:{ tag: name, page: 1}} )
    },
    selectTag: function (tag_info){
      if(tag_info.length !== 3)
      {
          this.$message.error('发生错误！');//alert("发生错误！");
        return
      }
      this.add_tagName = tag_info[0] + "(" + tag_info[1] + ")";
      this.add_tagId = tag_info[2];
    },
    getTagsImgInfo :async function (){
      let re_data;
      await axios({
        method:'get',
        url:'/search/imgTags',
        baseURL:this.myBaseURL,
        //responseType:'json',
        params:{
          imgId: this.$route.params.id
        }
      }).then(response => {
        re_data = response.data
      })
      return re_data
    },
    getFilePathUrl :function (imgId){
        axios({
            method:'get',
            url:'/source/getFilePath',
            baseURL:this.myBaseURL,
            params:{
                id: imgId
            }
        }).then(response => {
            this.fileUrl = response.data
        })
    },
      gotoIdImgD: function(){
          this.$router.push({path: '/imgDetail/'+this.gotoId})
      },
  },
  mounted() {
    const islogin = $cookies.get("isLogin")
    //console.log(islogin)
    this.isLogin = islogin
    // 存储 id
    let myparams = this.$route.params
    this.img_id = myparams.id

      // 加载filepath
    this.getFilePathUrl(this.img_id)
    // 加载图片
    this.getBlobFromId(this.img_id).then(res=>{
      this.img_blob = res
    })
    this.getTagsImgInfo().then(res=>{
      this.tags_data = res
      this.tags_show = res
      //console.log(res)
    })
  },
    watch:{
        '$route' () {
            let myparams = this.$route.params
            this.img_id = myparams.id

            // 加载filepath
            this.getFilePathUrl(this.img_id)
            // 加载图片
            this.getBlobFromId(this.img_id).then(res=>{
                this.img_blob = res
            })
            this.getTagsImgInfo().then(res=>{
                this.tags_data = res
                this.tags_show = res
                //console.log(res)
            })
        },
    },
  setup(){
    const route = useRoute() //获取到值
    //console.log("执行了setup函数")
    let query = route.query;
    return {
      query
    }
  },
  components: {
    MyHeader
  }
}
</script>

<style scoped>
.tags-menu{
  padding-top: 20px;
}
.menu-scr{
  height: 1000px;
  width: 100%;
}
.tag_name_txt{
  color: lightpink;
}
</style>
